…alendly integration

- Update color palette throughout codebase:
  * Primary Ternity Blue: #7DD3E8 → #87CEEB
  * Dark Blue (headlines/text): #1F2937 → #053B61
  * Blue accent: #5BC4DE → #6BB6D9
  * Update all gradients, shadows, and SVG colors
  * Update RGB values for consistency

- Add team section enhancements:
  * Add Haihao Liu's personal website link (https://hhliu.link/)
  * Add Tim Liu's LinkedIn profile link
  * Add Tim Liu as CFO & Co-Founder with full profile
  * Style profile links with gradient buttons and hover effects
  * Convert "Meet Haihao" section to "Meet Our Team"

- Update Calendly booking integration:
  * Replace all #book anchor links with direct Calendly URL
  * Update to new Calendly link: https://calendly.com/hhliu-ternity
  * Replace booking form with embedded Calendly widget
  * Add security attributes (target="_blank", rel="noopener noreferrer")
  * Update primary color parameter in Calendly embed to new blue

- Fix typography:
  * Add proper superscript to "22nd Century" in hero tagline
  * Keep plain text in meta tags per HTML standards
  * Add CSS styling for consistent superscript rendering

All changes maintain accessibility standards and responsive design.

… visualizations

Major improvements to enhance user experience and visual appeal:

1. Hero Section Enhancements:
   - Reduced headline font size from ~7rem to 4.5rem max for better proportion
   - Improved value proposition with stronger call-to-action message
   - Made subheadline more prominent (1.125-1.375rem)
   - Added emphasis styling for key value proposition statements
   - Improved spacing and readability

2. Typography Refinements:
   - Ensured superscript displays as lowercase "nd" with proper styling
   - Updated font-size to 0.6em for better proportion
   - Added text-transform: lowercase to force consistent display

3. Interactive Bar Chart Visualization:
   - Replaced static SVG chart with animated bar chart
   - Added AI Adoption vs Teacher Training comparison bars
   - Implemented scroll-triggered animations for bars
   - Added "The Gap" indicator with visual dashed line
   - Included axis labels and responsive design
   - Mobile-optimized layout (60px bars on mobile)

4. Process Section Animations:
   - Added staggered scroll-triggered animations for timeline steps
   - Enhanced transition curves with cubic-bezier for smooth motion
   - Added 150ms delay increments between steps for visual flow
   - Improved timeline line animation with 2s transition

5. Team Section Improvements:
   - Replaced placeholder SVGs with actual profile images
   - Added img tags for haihao.jpeg and tim.jpeg
   - Implemented fade-in effect on image load
   - Maintained grayscale filter with color hover effect
   - Removed "Book a Call" button from Tim's profile (kept LinkedIn only)

6. Neural Network Background Elements:
   - Added animated floating geometric shapes in 4 positions
   - Created SVG neural network with 15 animated nodes
   - Added connection lines with animated dashes
   - Implemented subtle pulse animations for nodes
   - Added float animations for shapes (20-30s duration)
   - Hidden on mobile (768px) for performance optimization
   - Disabled animations for users with prefers-reduced-motion
   - Set z-index hierarchy to keep content above background

7. JavaScript Updates:
   - Replaced old chart animation with bar chart animation
   - Added animateBarChart function with scroll detection
   - Updated main scroll handler to trigger bar animations
   - Maintained performance with animation flag

8. Accessibility & Performance:
   - Added prefers-reduced-motion support for all animations
   - Hidden neural background on mobile (<768px) to improve performance
   - Maintained keyboard navigation support
   - Preserved focus-visible styling
   - Optimized animation timings for 60fps performance

All changes maintain responsive design, accessibility standards, and the clean minimalist aesthetic while adding subtle, purposeful animations that enhance user engagement.

Complete redesign of the gap visualization with better UX and animations:

HTML Changes:
- Removed old simple bar chart implementation
- Added new gap-section-wrapper container
- Implemented proper bar-group structure with bar-background containers
- Added AI Adoption bar (88% height) and Teacher Training bar (30% height)
- Created detailed gap-indicator-container with brackets and warning icon
- Added gap-label-box with "The Gap" heading and "58% difference" stat
- Included x-axis and y-axis with proper labels and markers
- Added impact statement below chart with gradient background

CSS Improvements:
- Created comprehensive styling for gap-visualization-container
- Added white background card with rounded corners and shadow
- Implemented proper flex layout for chart area (400px min-height)
- Styled y-axis with rotated label and high/medium/low markers
- Created bar-background with gradient (350px height on desktop)
- Added smooth bar animation with bounce easing (2s duration)
- Used CSS variables for bar colors (--bar-color-light, --bar-color-dark)
- Styled bar values (88%, 30%) that appear after animation
- Created animated gap indicator with:
  * Orange brackets (top and bottom)
  * Dashed vertical lines
  * Warning emoji icon
  * Centered label box with scale animation
- Added impact statement styling with gradient background
- Implemented mobile responsive design (250px bar height, hidden y-axis)
- Added prefers-reduced-motion support

JavaScript Animation:
- Replaced animateBarChart with animateGapVisualization function
- Added scroll detection for gap-visualization-container
- Implemented CSS variable setting for bar heights
- Added 300ms delay before animation starts
- Animated both bars and gap indicator container
- Updated handleScroll to call new function

Key Features:
✅ Bars animate upward smoothly when scrolled into view
✅ Gap indicator appears with staggered timing (2.5s delay)
✅ Bar values fade in after bars finish animating (2s delay)
✅ Brackets and dashed lines create clear visual connection
✅ Warning icon draws attention to the problem
✅ Impact statement reinforces the message
✅ Fully responsive on mobile devices
✅ Accessible with reduced-motion support
✅ Professional card-based design

The new visualization makes "The Gap" immediately clear and engaging, with smooth animations that enhance understanding without being distracting.

Replaced complex gap diagram with much simpler 3-part layout:
- Left bar: AI Adoption (89%) in Ternity Blue gradient
- Center: 58% Gap indicator with arrow styling
- Right bar: Teacher Training (31%) in darker blue gradient

Changes:
- HTML: Simplified structure using only .gap-container, .gap-visual, .gap-bar components
- CSS: Removed Y-axis, brackets, warning icons - using only brand colors (#87CEEB, #053B61)
- JavaScript: Replaced with cleaner IntersectionObserver-based animation
- Mobile: Responsive design with reduced heights and smaller text
- Accessibility: Added prefers-reduced-motion support for gap animations

Design emphasizes minimalism and clarity with smooth cubic-bezier animations.

# Vercel Web Analytics Implementation

## Summary
Successfully implemented Vercel Web Analytics for the Ternity Education website as requested.

## Changes Made

### Modified Files:
- **index.html** - Added Vercel Web Analytics tracking scripts

## Implementation Details

Added the Vercel Web Analytics tracking code to the `<head>` section of index.html, just before the closing `</head>` tag and after the stylesheet link.

The implementation includes:
1. The window.va initialization script that sets up the analytics queue
2. The deferred loading of the Vercel insights script from `/_vercel/insights/script.js`

### Code Added:
```html
<!-- Vercel Web Analytics -->
<script>
    window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
```

## Why This Approach

This implementation follows the official Vercel Web Analytics documentation for HTML sites:
- No package installation needed (this is a plain HTML site with no Node.js dependencies)
- Scripts are placed in the `<head>` section for early initialization
- The defer attribute ensures the script loads without blocking page rendering
- The initialization function allows analytics to queue events before the main script loads

## Next Steps

After deployment to Vercel:
1. The `/_vercel/insights/*` routes will be automatically created
2. Analytics will begin tracking visitors and page views
3. Data will be visible in the Vercel dashboard under the Analytics tab
4. A Fetch/XHR request to `/_vercel/insights/view` should be visible in browser Network tab

## Notes

- This is a plain HTML website (no package.json), so no dependencies needed to be installed
- No build process required
- The site is ready for deployment to Vercel with Web Analytics enabled

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>